<span class="inline-block font-semibold leading-normal px-2 py-1 rounded text-xxs uppercase whitespace-nowrap
             {% if type == 'info' %}
                 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400
             {% elif type == 'danger' %}
                 bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400
             {% elif type == 'warning' %}
                 bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400
             {% elif type == 'success' %}
                 bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400
             {% elif type == 'primary' %}
                 bg-primary-100 text-primary-700 dark:bg-primary-500/20 dark:text-primary-400
             {% else %}
                 bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-400
             {% endif %}">
    {{ text }}
</span>
